<template>
  <div class="text" :style="styleColor">
    <marquee behavior="" :direction="styleColor.direction">{{
      data.value
    }}</marquee>
  </div>
</template>

<script>
import store from "@/store/index.js";
export default {
  name: "WidgetMarquee",
  components: {},
  props: {
    value: Object,
    ispreview: Boolean,
  },
  data() {
    return {
      options: {},
      optionsData: {},
      dataId: "",
      dataType: "",
      timer: null,
      data: {
        value: 0,
      },
    };
  },
  computed: {
    transStyle() {
      return this.objToOne(this.options);
    },
    styleColor() {
      return {
        position: this.ispreview ? "absolute" : "static",
        color: this.transStyle.color,
        "font-weight": this.transStyle.fontWeight,
        text: this.transStyle.text,
        "font-size": this.transStyle.fontSize + "px",
        "letter-spacing": this.transStyle.letterSpacing + "em",
        background: this.transStyle.background,
        "text-align": this.transStyle.textAlign,
        width: this.transStyle.width + "px",
        height: this.transStyle.height + "px",
        left: this.transStyle.left + "px",
        top: this.transStyle.top + "px",
        right: this.transStyle.right + "px",
        marqueeSet: this.transStyle.marqueeSet,
        styleColor: this.transStyle.marqueeQuit,
      };
    },
    isBehavior() {
      return this.styleColor.marqueeSet ? "start()" : "stop()";
    },
  },
  watch: {
    value: {
      handler(val) {
        this.options = val;
        this.optionsData = val.data;
        this.setOptionsData();
        this.dataType = this.optionsData.dataType;
      },
      deep: true,
    },
  },
  mounted() {
    this.options = this.value;
    this.optionsData = this.value.data;
    this.setOptionsData();

    this.timer = setInterval(() => {
      if (store.state.data.hasOwnProperty(this.dataId)) {
        this.data = store.state.data[this.dataId];
        clearInterval(this.timer);
        this.timer = null;
      }
    }, 100);
  },
  destroyed() {
    if (this.timer != null) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
  methods: {
    // 数据解析
    setOptionsData() {
      const optionsData = this.optionsData; // 数据类型 静态 or 动态
      if (optionsData.dataType == "dynamicData") {
        this.dataType = "dynamicData";
        if (optionsData.dynamicData.hasOwnProperty("chartProperties")) {
          if (
            optionsData.dynamicData.chartProperties.hasOwnProperty("dataId")
          ) {
            this.dataId = optionsData.dynamicData.chartProperties.dataId;
          }
        }
      } else {
        this.data.value = this.transStyle.text;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.text {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
